<template>
  <div>
    <el-row :gutter="20" style="margin:20px; height: 700px;">
      <el-col :span="10" style=" height: 100%;">
        <el-card  class="box-card" style="padding: 20px; height: 100%; color: #666666;">
          <div slot="header">
            <span>用户信息</span>
          </div>
          <el-form ref="form" label-width="100px" label-position="left" >
            <el-form-item label="登录名：">
              {{ user.loginName }}
            </el-form-item>
            <el-form-item label="用户姓名：">
              {{ user.name }}
            </el-form-item>
            <el-form-item label="所属部门：">
              {{ user.instituteName }}
            </el-form-item>
            <el-form-item label="状态：">
              有效
            </el-form-item>
            <el-form-item label="创建时间：">
              {{ user.createTime }}
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <el-col :span="14" style=" height: 100%;">
        <el-card class="box-card" style="padding: 20px; height: 100%;">
          <div slot="header">
            <span id="mytaskwaitingmenu">
              <a  @click="openMyTaskWaitingMenu">我的待办任务</a>
            </span>
            <span style="float: right; font-size: 14px; color: #666;">共{{list.length}}条数据</span>
            <div style="clear: both;"></div>
          </div>
          <div id="task_mytaskwaiting">
            <el-scrollbar style="height: 600px;">
              <div class="seamless-warp">
                <ul class="item">
                  <li v-for="(item, index) in list" :key="index">
                    <span style="width: 60%; text-align: left;" v-text="item.procInstName+'（当前节点：'+item.taskName+'）'"
                          :data-itemid="item.id" @click="openMyTaskWaitingMenu"></span>
                    <span style="width: 40%; text-align: right;" v-text="'发起日期：'+item.procInstStartTime"
                          :data-itemid="item.id" >
                    </span>
                  </li>
                </ul>
              </div>
            </el-scrollbar>
          </div>

        </el-card>
      </el-col>
    </el-row>


  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import {listMyWaitingTask} from '@/views/flow/act/task/api/dynamicApi'

export default {
  name: 'Dashboard',
  components: {},
  computed: {
    ...mapGetters([
      'name', 'permission_routes','user'
    ])
  },
  data(){
    return{
      list: [],
      total: 0,
      footer: [],
      listLoading: false,
      queryLoading: false,
      downloadLoading: false,
      listQuery: {
        page: 1,
        limit: 10000,
        sort:'-id'
      },
      loading4BtnSmt: false,
      btnList: [],
      row: {},
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    openMyTaskWaitingMenu() {
      this.$router.resolve({
        path: '/layout/TmptMyWaitingTask',
        name: 'TmptMyWaitingTask',
      })
      this.$router.push({
        name: 'TmptMyWaitingTask',
      })
    },
    getList() {
      this.listLoading = true
      // 重组查询条件
      const params = Object.assign({}, this.listQuery)
      listMyWaitingTask(params).then(r => {
        this.listLoading = false
        if (!r.success) {
          this.notify(r)
          return
        }
        this.list = r.list
        this.total = r.total
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 16px;
    line-height: 46px;
    color: #333333;
  }
}
</style>

<style lang="less" scoped>
  #mytaskwaitingmenu {
    cursor: pointer;
    color: #666;
    :hover{
      color: red;
    }
  }

  #task_mytaskwaiting {
    width: 100%;
    height: 100%;
    /*padding-right: 10px;*/

    .header {
      height: 40px;
      width: 100%;
      font-size: 15px;
      /*align-items: center;*/
      text-align: center;
      display: flex;
      color: #666;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /*border-radius: 15px;*/
    }

    .seamless-warp {
      height: calc(~"100% - 100px");
      width: 100%;
      /*overflow: hidden;*/
      overflow: auto;
      font-size: 14px;

      .item {
        width: 100%;
        height: 100%;
        list-style: none;
        line-height: 40px;
        margin: 0;
        padding: 0 2px 0 2px;

        li {
          width: 100%;
          height: 100%;
          cursor: pointer;
          color: #666;
          :hover{
            color: red;
          }
          span {
            width: 25%;
            font-weight: normal;
            text-align: center;
            float: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }
    }
  }
</style>
